<script setup>
import { defineProps,ref } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';
const props = defineProps(['filterPet'])
console.log(props.filterPet);
const modules = ref([Pagination])
</script>
<template>
    <el-descriptions direction="vertical" :column="3" border>
        <el-descriptions-item label="宠物名字">{{ filterPet.name }}</el-descriptions-item>
        <el-descriptions-item label="品种" v-if="filterPet.personality">{{ filterPet.personality }}</el-descriptions-item>
        <el-descriptions-item label="年龄" v-if="filterPet.age" :span="2">{{ filterPet.age }}</el-descriptions-item>
        <el-descriptions-item label="性格" v-if="filterPet.variety">{{ filterPet.variety }}</el-descriptions-item>
        <el-descriptions-item label="健康状况" v-if="filterPet.health">{{ filterPet.health }}</el-descriptions-item>
        <el-descriptions-item label="发布时间">{{ filterPet.time }}</el-descriptions-item>
        <el-descriptions-item label="联系方式">
            <el-tag size="small">{{ filterPet.contact }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="走失地址">{{ filterPet.address }}</el-descriptions-item>
        <el-descriptions-item label="状态">
            <el-tag type="primary" v-if="filterPet.resource == '领养'">{{ filterPet.resource }}</el-tag>
            <el-tag type="warning" v-else>{{ filterPet.resource }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="悬赏" v-if="filterPet.price">
            <el-tag type="warning">￥{{ filterPet.price ? filterPet.price : "暂无" }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="描述">
            {{ filterPet.detail ? filterPet.detail : "暂无" }}
        </el-descriptions-item>
        <el-descriptions-item label="图片">
            <swiper :space-between="50" loop :pagination="{ clickable: true }" :modules="modules">
                <swiper-slide v-for=" (item, index) in filterPet.files" key="index">
                    <img :src="`http://localhost:3000/${item}`" />
                </swiper-slide>
            </swiper>
        </el-descriptions-item>
    </el-descriptions>
</template>
<style>
.swiper-slide img {
    width: 180rem;
    height: 180rem;
    object-fit: cover;
}

.swiper {
    width: 180rem;
}

.swiper-pagination-bullet-active{
    background-color: #fff;
}
</style>